<template>
  <div id="roles" v-loading="loading">
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>接口管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片主体 -->
    <el-card class="box-card" style="width: 100%">
      <div class="block">
        <!-- 节点过滤 -->
        <el-row>
          <el-col>
            <div class="grid-content bg-purple-light">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="openParentAdd"
              >父级
              </el-button>
            </div>
          </el-col>
        </el-row>

        <p>   </p>
<!--        <el-tree-->
<!--          :data="data"-->
<!--          accordion-->
<!--          :auto-expand-parent="false"-->
<!--          node-key="id"-->
<!--          :default-expanded-keys="open"-->
<!--          :expand-on-click-node="false"-->
<!--          :render-content="renderContent"-->
<!--          :props="defaultProps"-->
<!--          highlight-current-->
<!--          :filter-node-method="filterNode"-->
<!--          ref="tree"-->
<!--        ></el-tree>-->
        <el-table
          :data="data"
          style="width:100%; margin-bottom: 20px;"
          row-key="id"
          border
          :filter-node-method="filterNode"
          ref="tree"
          :default-expand-all="false"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="apiName"
            label="接口名"
            width="170">
          </el-table-column>
          <el-table-column
            prop="apiUrl"
            label="请求地址"
            width="150">
          </el-table-column>
          <el-table-column
            prop="apiMethod"
            label="请求方式"
            width="100">
          </el-table-column>
          <el-table-column
            prop="apiSort"
            label="排序"
            width="80">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="300">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改时间"
            width="150">
          </el-table-column>
          <el-table-column
            label="操作"
            width="200"
            fixed="right"
            >
            <template slot-scope="scope" >
              <el-button type="success" size="mini" icon="el-icon-plus" v-show="!scope.row.parentId" @click="edit(scope.row)"></el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit"  @click="edit(scope.row)"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-card>
    <!-- 节点新增弹出框 -->
    <el-dialog :title="addTitle" :visible.sync="addDialogVisible" @close="addClose" width="50%">
      <span>
        <el-form
          size="mini"
          ref="addFormRef"
          :model="addForm"
          label-width="80px"
          :rules="addFormRules"
        >
          <el-form-item label="节点名称" prop="menuName">
            <el-input v-model="addForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="URL">
            <el-input v-model="addForm.url"></el-input>
          </el-form-item>
          <el-form-item label="权限编码">
            <el-input v-model="addForm.perms"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="addForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="是否可用" prop="disabled">
            <template>
              <el-radio v-model="addForm.disabled" label="false">可用</el-radio>
              <el-radio v-model="addForm.disabled" label="true">禁用</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="是否展开" prop="open">
            <template>
              <el-radio v-model="addForm.open" label="1">展开</el-radio>
              <el-radio v-model="addForm.open" label="0">关闭</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="addForm.orderNum" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <template>
              <el-radio v-model="addForm.type" label="0">菜单</el-radio>
              <el-radio v-model="addForm.type" label="1">按钮</el-radio>
            </template>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNode" :loading="btnLoading" :disabled="btnDisabled">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑节点弹出框 -->
    <el-dialog :title="editTitle" :visible.sync="editlogVisible" width="50%" @close="editClose">
      <span>
        <el-form
          size="mini"
          ref="editFormRef"
          :model="editForm"
          label-width="80px"
          :rules="addFormRules"
        >
          <el-form-item label="节点名称" prop="menuName">
            <el-input v-model="editForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="URL">
            <el-input v-model="editForm.url"></el-input>
          </el-form-item>
          <el-form-item label="权限编码">
            <el-input v-model="editForm.perms"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="editForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="是否可用" prop="disabled">
            <template>
              <el-radio v-model="editForm.disabled" :label="false">可用</el-radio>
              <el-radio v-model="editForm.disabled" :label="true">禁用</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="是否展开" prop="open">
            <template>
              <el-radio v-model="editForm.open" :label="1">展开</el-radio>
              <el-radio v-model="editForm.open" :label="0">关闭</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="排序" prop="orderNum">
            <el-input-number v-model="editForm.orderNum" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <template>
              <el-radio v-model="editForm.type" :label="0">菜单</el-radio>
              <el-radio v-model="editForm.type" :label="1">按钮</el-radio>
            </template>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editlogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateMenu"
          :loading="btnLoading"
          :disabled="btnDisabled"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getAllMenuTree } from '../../api/menu'

let id = 1000

export default {
  name: 'Api',
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },

  data () {
    const data = [
      {
        'id': 1,
        'parentId': 0,
        'apiName': '员工',
        'apiUrl': '/user',
        'apiMethod':'',
        'apiSort': 1,
        'description':'员工管理模块所有接口',
        'icon': 'el-icon-setting',
        'open': 1,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 253,
            'parentId': 1,
            'menuName': '模糊查询员工分页列表',
            'apiUrl': '/user/getUserList',
            'apiName': '查询分页列表',
            'apiMethod':'Post',
            'createTime':'2021-4-21',
            'apiSort': 1,
            'description':'模糊查询员工分页列表',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'welcome:view',
            'type': 0,
            'children': []
          },
          {
            'id': 226,
            'parentId': 1,
            'menuName': '获取个人信息',
            'apiUrl': '/user/getUserInfo',
            'apiName': '获取个人信息',
            'createTime':'2021-4-21',
            'apiMethod':'Get',
            'apiSort': 2,
            'description':'获取员工个人信息',
            'icon': 'el-icon-user',
            'orderNum': 2,
            'open': 0,
            'disabled': false,
            'perms': 'users',
            'type': 0,
            'children': []
          },
          {
            'id': 321,
            'parentId': 1,
            'menuName': '客户管理',
            'url': '/customer',
            'apiUrl': '/user/add',
            'apiName': '添加员工',
            'createTime':'2021-4-21',
            'apiMethod':'Post',
            'apiSort': 3,
            'description':'',
            'icon': 'el-icon-picture-outline',
            'orderNum': 2,
            'open': 1,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': []
          },
          {
            'id': 4,
            'parentId': 1,
            'menuName': '岗位管理',
            'url': '/role',
            'apiUrl': '/user/delete/?',
            'createTime':'2021-4-21',
            'apiName': '删除员工',
            'apiMethod':'Delete',
            'apiSort': 4,
            'description':'',
            'icon': 'el-icon-help',
            'orderNum': 3,
            'open': 0,
            'disabled': false,
            'perms': null,
            'type': 0,
            'children': []
          },
          {
            'id': 235,
            'parentId': 1,
            'menuName': '部门管理',
            'url': '/department',
            'apiUrl': '/user/update/?',
            'apiName': '更新员工',
            'createTime':'2021-4-21',
            'apiMethod':'Put',
            'apiSort': 5,
            'description':'',
            'icon': 'el-icon-postcard',
            'orderNum': 3,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 312,
        'parentId': 0,
        'menuName': '业务管理',
        'url': null,
        'apiUrl': '/cus',
        'apiName': '客户',
        'apiMethod':'',
        'apiSort': 2,
        'description':'客户管理模块所有接口',
        'icon': 'el-icon-s-goods',
        'orderNum': 2,
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [{
          'id': 229,
          'parentId': 312,
          'menuName': '合同管理',
          'url': '/con',
          'icon': 'el-icon-date',
          'orderNum': 1,
          'open': 1,
          'disabled': false,
          'perms': 'el-icon-date',
          'createTime':'2021-4-21',
          'type': 0,
          'children': []
        }]
      },
      {
        'id': 303,
        'parentId': 0,
        'menuName': '商品管理',
        'url': '',
        'apiUrl': '/dept',
        'apiName': '部门',
        'apiMethod':'',
        'apiSort': 3,
        'description':'部门管理模块所有接口',
        'icon': 'el-icon-platform-eleme',
        'orderNum': 3,
        'open': 0,
        'disabled': false,
        'perms': '',
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [{
          'id': 273,
          'parentId': 303,
          'menuName': '商品列表',
          'url': '/map',
          'icon': 'el-icon-s-opportunity',
          'orderNum': 1,
          'open': 1,
          'disabled': false,
          'perms': 'map:view',
          'type': 0,
          'children': []
        }]
      },
      {
        'id': 295,
        'parentId': 0,
        'menuName': '数据统计',
        'url': '',
        'apiUrl': '/role',
        'apiName': '角色',
        'apiMethod':'',
        'apiSort': 4,
        'description':'角色管理模块所有接口',
        'icon': 'el-icon-s-marketing',
        'orderNum': 5,
        'open': 0,
        'disabled': false,
        'perms': '',
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 297,
            'parentId': 295,
            'menuName': '个人业绩',
            'url': '/self',
            'icon': 'el-icon-warning',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': []
          },
          {
            'id': 341,
            'parentId': 295,
            'menuName': '销售统计',
            'url': '/blog',
            'icon': 'el-icon-view',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': '',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 5,
        'parentId': 0,
        'menuName': '其他管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/menu',
        'apiName': '菜单',
        'apiMethod':'',
        'apiSort': 5,
        'description':'菜单管理模块所有接口',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 6,
        'parentId': 0,
        'menuName': '其他管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/api',
        'apiName': '接口',
        'apiMethod':'',
        'apiSort': 6,
        'description':'接口管理模块所有接口',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 7,
        'parentId': 0,
        'menuName': '商品管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/goods',
        'apiName': '商品',
        'apiMethod':'',
        'apiSort': 7,
        'description':'',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 8,
        'parentId': 0,
        'menuName': '其他管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/cat',
        'apiName': '商品分类',
        'apiMethod':'',
        'apiSort': 8,
        'description':'',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 9,
        'parentId': 0,
        'menuName': '其他管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/in',
        'apiName': '商品入库',
        'apiMethod':'',
        'apiSort': 9,
        'description':'',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      },
      {
        'id': 10,
        'parentId': 0,
        'menuName': '其他管理',
        'url': '/logs',
        'icon': 'el-icon-camera',
        'orderNum': 6,
        'apiUrl': '/out',
        'apiName': '商品出库',
        'apiMethod':'',
        'apiSort': 10,
        'description':'',
        'open': 0,
        'disabled': false,
        'perms': null,
        'type': 0,
        'createTime':'2021-4-21',
        'updateTime':'2021-4-21',
        'children': [
          {
            'id': 271,
            'parentId': 5,
            'menuName': 'swagger文档',
            'url': '/loginLog',
            'icon': 'el-icon-date',
            'orderNum': 1,
            'open': 0,
            'disabled': false,
            'perms': 'login:log',
            'type': 0,
            'children': []
          }
        ]
      }
    ]
    //const data = [];
    return {
      visibleButton:'',
      btnLoading: false,
      btnDisabled: false,
      loading: true,
      open: [], //展开节点
      filterText: '', //节点过滤文本
      addDialogVisible: false, //新增节点弹出框
      editlogVisible: false, //编辑节点弹出框
      addTitle: '',
      editTitle: '',
      addForm: {
        parentId: '',
        menuName: '',
        url: '',
        type: '',
        orderNum: '',
        disabled: '',
        open: '',
        perms: ''
      }, //添加请求表单数据
      editForm: {}, //编辑节点表单数据
      addFormRules: {
        menuName: [
          {
            required: true,
            message: '节点名称不能为空',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        disabled: [
          {
            required: true,
            message: '节点状态不能为空',
            trigger: 'blur'
          }
        ],

        orderNum: [
          {
            required: true,
            message: '排序不能为空',
            trigger: 'blur'
          }
        ],
        type: [{
          required: true,
          message: '类型不能为空',
          trigger: 'blur'
        }],
        open: [{
          required: true,
          message: '是否展开不能为空',
          trigger: 'blur'
        }]
      }, //添加表单验证规则
      pNode: {}, //父节点
      data: JSON.parse(JSON.stringify(data)),

      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    }
  },
  created () {
    setTimeout(() => {
      this.loading = false
    }, 500)
  },
  methods: {

    /**
     * 加载菜单表格
     */
    downExcel () {
      var $this = this
      const res = axios.request({
        url: '/menu/excel',
        method: 'post',
        responseType: 'blob'
      })
        .then(res => {
          if (res.headers['content-type'] === 'application/json') {
            return $this.$message.error('Subject does not have permission [menu:export]')
          }
          const data = res.data
          let url = window.URL.createObjectURL(data) // 将二进制文件转化为可访问的url
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.href = url
          a.download = '菜单列表.xls'
          a.click()
          window.URL.revokeObjectURL(url)
        })
    },

    //更新菜单
    async updateMenu () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          return
        } else {
          this.btnLoading = true
          this.btnDisabled = true
          const { data: res } = await this.$http.put(
            'system/menu/update/' + this.editForm.id,
            this.editForm
          )
          if (res.success) {
            this.$message({
              title: '成功',
              message: '节点信息更新',
              type: 'success'
            })
            this.editForm = {}
            this.editlogVisible = false
            await this.getMenuTree()
          } else {
            this.btnLoading = false
            this.btnDisabled = false
            return this.$message.error('更新菜单失败' + res.data.errorMsg)
          }
        }
      })
    },
    //点击编辑节点
    edit (row) {
      this.editTitle = '编辑：【' + JSON.parse(JSON.stringify(row.menuName)) + '】'
      this.editForm = JSON.parse(JSON.stringify(row))
      this.editlogVisible = true
    },
    //过滤节点
    filterNode (value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    },
    //关闭添加
    addClose () {
      this.$refs.addFormRef.clearValidate()
      this.addForm = {}
    },
    editClose () {
      this.$refs.editFormRef.clearValidate()
      this.editForm = {}
    },
    //加载菜单树
    async getMenuTree () {
      const res = await getAllMenuTree()
      if (res.success) {
        this.data = res.data.tree
        this.open = res.data.open
      }
    },
    //打开添加框
    openAdd (data) {
      this.addTitle = '添加节点 ：当前【' + data.menuName + '】'
      this.addDialogVisible = true
      this.addForm.parentId = data.id
      this.pNode = data
    },
    //添加最高父级节点
    openParentAdd (data) {
      this.addTitle = '添加第一父级'
      this.addDialogVisible = true
      this.addForm.parentId = 0
    },
    //点击删除按钮
    async delNode (node, data) {
      const res = await this.$confirm(
        '此操作将永久删除该节点, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        console.log(node)
        const { data: res } = await this.$http.delete(
          'system/menu/delete/' + node.data.id
        )
        if (res.success) {
          this.$message.success('节点删除成功')
          await this.getMenuTree()
        } else {
          this.$message.error('节点删除失败:' + res.data.errorMsg)
        }
      }
    },
    //发送添加节点请求
    async addNode () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) {
          return
        } else {
          this.btnLoading = true
          this.btnDisabled = true
          const { data: res } = await this.$http.post('system/menu/add', this.addForm)
          if (res.success) {
            this.$message.success('节点添加成功')
            this.addDialogVisible = false
            await this.getMenuTree()
          } else {
            this.$message.error('节点添加失败:' + res.data.errorMsg)
          }
          this.btnLoading = false
          this.btnDisabled = false
        }
      })
    },
    //前端添加节点
    append (data, newChild) {
      //   var newChild = { id: 1231, label: "qqqqq", children: [] };
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },

    remove (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },

    renderContent (h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>
            <i class={data.icon}></i>
            &nbsp;&nbsp;&nbsp;{node.label}

          </span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => {
                this.edit(data)
                return false
              }}
            >
              <i class="el-icon-edit"></i>
              &nbsp;编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => {
                this.openAdd(data)
              }}
            >
              <i class="el-icon-plus"></i>
              &nbsp;增加
            </el-button>

            <el-button
              size="mini"
              type="text"
              on-click={() => this.delNode(node, data)}
            >
              <i class="el-icon-delete"></i>
              &nbsp;删除
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>

<style>

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;
}
</style>
